過去有很長一段時間中,開發環境的建置都被視為學習 React 的首要最大難關。由於 React 從非常早期的版本就已經擁抱 transpiler 與 moudle bundler 等現代化的前端技術作為預設的開發環境選項,並且當時並沒有提供官方的開發環境建置工具,因此你必須自己手把手的去設定 Babel、Webpack 的所有細節才能建立一個完善的 React 開發環境。
這其實也是 React 生態圈一直以來的一個缺點:比起 Vue 核心團隊對於開發者極其友善且用心的一條龍周邊工具,React 的核心維護團隊更專注於 React 本身的設計思維、底層實現以及 API 的改善和演進,而相對比較沒有投入太多的心力在打造生態圈中的周邊工具,這也跟 React 定位本身只是 「管理 UI 的函式庫」有關。因此你會看到 React 生態圈中不僅是開發環境建置工具,像是 router、Redux 等熱門的解決方案也都不是由 React 的核心團隊所開發的,而是生態圈中的社群志願者們所打造並維護。
所幸 React 核心維護團隊也意識到「開發環境建置工具」是攸關 React 這項技術是否能順利的入門的重要門檻,並且手把手設定有其相當的難度,因此從 2016 年時開始著手推出官方的工具 create-react-app
。隨著時間的推移這個工具也不斷的改善並推廣,時至今日已經是一個相當方便且成熟的方案,它能夠讓開發者一鍵的快速建立一個絕大多數情形都可以直接適用的 React 開發環境。
圖片來源:https://create-react-app.dev/docs/getting-started
而 Create React App 也有專門的官網以及文件提供手把手的使用教學,非常推薦,可以參考此處:https://create-react-app.dev/docs/getting-started
此處我們就不做太細節的介紹了,自行參考官方文件應該就非常夠用。
不過由於它將內建的的 Babel、Webpack 等細節設定都封裝並隱藏起來,因此雖然大多專案的需求下你都可以直接使用它預設的配置,但當你有比較複雜的客製化需求時就會遇到一些限制。因此當你遇到複雜且有高度客製化建置需求的 React 專案時,還是可以考慮自己手動建置開發環境以換取最大的自由度與彈性。
當專案建置環境有比較客製化的需求時,或為了真正搞懂 React 建置環境的細節,仍然值得去研究並瞭解要如何自己手把手的建立 React 開發環境。當然如果我們要手把手的從零完全教學的話可能寫完整個鐵人賽三十篇都還不夠,因此這裡主要會先點出 React 開發環境的必須元素以及為什麼我們需要它們,至於細節的設定方法網路上有非常多的學習資源可以參考。
在嘗試自己動手建置前當然是要先了解 React 開發環境哪些需求是必須要滿足的:
JSX transformer
在絕大多數情況下,我們都會使用 JSX 語法來進行 React 的開發,因此將 JSX 語法轉換成瀏覽器能夠執行的普通 JS 語法就幾乎成了必要的需求。通常有兩種方式可以做到這件事情:事前靜態轉換,以及 runtime 即時的轉換
直接在瀏覽器中讀取尚未被轉換的 JSX 程式碼,並依靠 runtime transpiler 即時的翻譯來轉換成普通 JS
例如 babel 有提供 runtime 版本的 standalone,可以作為 CDN 直接引入。只要在包含 JSX 語法的 <script>
標籤上標注 type="text/jsx"
,babel runtime 就會自動即時將其 JSX 語法進行轉換後再執行:
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<!-- 引入 React -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- 引入 Babel runtime -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const root = ReactDOM.createRoot(document.querySelector('#app'));
// 可以直接在這裡寫 JSX 語法,runtime babel 會即時在瀏覽器端即時轉換後才執行
root.render(<h1>Hello, world!</h1>);
</script>
</body>
</html>
這樣做等同於每次瀏覽器在 JSX 相關的程式執行前都必須花費時間與效能先進行完即時的轉換後,才能開始運行,因此龐大且複雜的應用程式場景時可能有嚴重的效能隱憂
因此非常不建議以這種做法來作為正式的本地開發環境,更完全不應該用於 production build。通常會這樣做是在快速實作一段純演示性質的程式程式的時候才比較合適,例如:在 JSFiddle、codepen 上快速建立一個 React 範例
支援 ES6+ 語法
除了 JSX 語法之外,在 React 官方或社群推薦的寫法 best practice 中也處處可見使用到較新的 ES6+ 語法,像是陣列解構、物件解構、spread、rest、arrow function…等等,而這些語法仍然會面臨較老舊瀏覽器的向下相容問題
支援 ES module
最後,React 也非常早就擁抱了現代化前端工程中的重要技術:模組化。尤其是在基於 component base 的開發方式下,我們很常會將不同的 component 拆分成不同的檔案,並且互不干擾,只有在有需要時才手動相互引用。因此設置一個可以支援 ES module 的環境也是 React 開發幾乎必須的條件
React 社群中也有更高度封裝且熱門的框架系統,它們通常也已經內建整合了許多進階的開發環境需求,如 Next.js 、Remix 等基於 React 的主流框架。不過它們也封裝了許多其他更進階的其它功能與特性,因此會建議先了解並確定之後再評估是否有需要使用到這些框架。
總體來說,我會推薦你優先考慮使用 Create React App 來建立你的開發環境,它已經能滿足絕大多數的專案需求,並且幾乎無痛完成環境設置。當真的有較高的客製化需求時,再考慮自己手建環境,而工具的選擇最主流的應該還是 Babel + Webpack 的組合,不過你也可以根據自己的需求去替換成其它的類似工具。而如果不只是開發環境,而是整個應用程式都有更進階的需求時(例如 Server-side rendering),才會建議考慮選擇如 Next.js 等框架方案。
在經過快要一年的努力後,本系列文的實體書版本推出了~其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節,並以全彩印刷拉滿視覺上的閱讀體驗,現正熱銷中!有興趣的話歡迎參考看看,也歡迎分享給其他有接觸前端的朋友們,非常感謝大家~
《React 思維進化:一次打破常見的觀念誤解,躍升專業前端開發者》
目前首刷的軟精裝版本各大通路已經幾乎都銷售一空,接下來會再刷推出新的平裝版本:
天瓏(平裝版預購):
https://www.tenlong.com.tw/products/9786263337695
博客來(平裝版):
https://www.books.com.tw/products/0010982322
momo(平裝版):
https://www.momoshop.com.tw/goods/GoodsDetail.jsp?i_code=12528845